@media (max-width: 1224px) {
    .hide-break-lg {
        display: none !important;
    }

	#products-link:after {
		display: none;
	}
}

@media (max-width: 1024px) {
    .hide-break-md {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-break-sm {
        display: none !important;
    }

    .show-break-sm {
        display: block !important;
    }

    :root {
        --page-gutters: 0;
        --max-layout-size: 100vw;
    }

    #header-main {
        border: none;
    }

    #layout-main {
        box-shadow: none;
        border: none;
        margin-top: 0;
    }

    #header-main {
        box-shadow: none;
    }

    #search-bar input,
    #search-bar button {
        padding: var(--s-1);
    }

    #banner {
        min-block-size: 15em;
    }

    #nav-main cluster-l {
        justify-content: center;
    }

    #nav-main a {
        font-weight: 500;
    }

    #nav-main a:first-child {
        position: relative;
        font-weight: 500;
    }

    #nav-main a:first-child::after {
        display: none;
    }
}

* {
    box-sizing: border-box;
}

html {
    font-family: var(--default-font);
    font-optical-sizing: auto;
    font-variation-settings: "slnt" 0;

    line-height: 1.25;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    background-color: var(--accent);
    inline-size: 100%;
    margin: 0;
}

li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

input {
    inline-size: 100%;
    block-size: 100%;
    outline: none;
    border: none;
    padding-inline-start: var(--s-1);
}

/* Lines */
hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3)
}

/* Text */
h1,
h2,
h3,
h4,
h5 {
    color: var(--text-default);
    margin: 0;
}

p,
a {
    font-weight: 400;
    color: var(--text-default);
    margin: 0;
    text-decoration: none;
}

legend {
    padding: var(--s-2);
}

/* Buttons */
button {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    overflow: visible;
    text-transform: none;
}

.button {
    --btn-color: var(--red);
    --btn-text-color: var(--white);
    --btn-outline: var(--btn-border);
    --btn-hover-color: var(--red-dark);
    --btn-active-color: var(--red-light);
    --btn-disabled-color: var(--accent);
    appearance: none;
    background-color: var(--btn-color);
    border: 1px solid var(--charcoal);
    border-radius: var(--default-radius);
    color: var(--btn-text-color);
    text-align: center;
    cursor: pointer;
    outline: none;
    padding: var(--s-2);
    white-space: nowrap;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
}

.button:disabled {
    background-color: var(--btn-disabled-color);
    color: var(--charcoal);
    cursor: default;
}

.button:hover {
    background-color: var(--btn-hover-color);
    text-decoration: none;
}

.button:active {
    background-color: var(--btn-active-color);
    outline: none;
}

.outline-button {
    --btn-color: var(--charcoal);
    --btn-text-color: #24292E;
    --btn-hover-color: var(--red-dark);
    --btn-active-color: var(--red-light);
    --btn-disabled-color: var(--accent);
    --btn-padding: var(--s-2);
    appearance: none;
    background-color: inherit;
    border: 1px solid var(--btn-color);
    border-radius: var(--default-radius);
    box-sizing: border-box;
    color: var(--btn-text-color);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    padding: var(--btn-padding);
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
}

.outline-button:hover {
    background-color: #F3F4F6;
    text-decoration: none;
    transition-duration: 0.1s;
}

.outline-button:disabled {
    background-color: #FAFBFC;
    border-color: rgba(27, 31, 35, 0.15);
    color: #959DA5;
    cursor: default;
}

.outline-button:active {
    background-color: #EDEFF2;
    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
    transition: none 0s;
}

.outline-button:focus {
    outline: 1px transparent;
}

.outline-button:before {
    display: none;
}

.outline-button:-webkit-details-marker {
    display: none;
}
